<template>
    <div class="editSite">
        <el-row>
            <el-col :span="4">
                <h2>主页设置</h2>
            </el-col>
            <el-col :span="8" :offset="12" align="right">
                <el-button type="primary" icon="el-icon-check" @click="saveFn()">保存</el-button>
                <el-button icon="el-icon-back" @click="btnClick('back')">返回上级</el-button>
            </el-col>
        </el-row>

        <div class="editList">
            <el-row>
                <el-col :span="2">
                    <label>主页域名</label>
                </el-col>
                <el-col :span="10">
                    <el-input placeholder="主页域名" :disabled="true" v-model="homeData.domain"></el-input>
                </el-col>
                <el-col :span="2">
                    <label>主页标题</label>
                </el-col>
                <el-col :span="10">
                    <el-input placeholder="主页标题" v-model="homeData.title"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="2">
                    <label>SEO标题</label>
                </el-col>
                <el-col :span="10">
                    <el-input placeholder="SEO标题" v-model="homeData.seo_title"></el-input>
                </el-col>
                <el-col :span="2">
                    <label>SEO描述</label>
                </el-col>
                <el-col :span="10">
                    <el-input placeholder="SEO描述" v-model="homeData.seo_desc"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="2">
                    <label>页面语言</label>
                </el-col>
                <el-col :span="10">
                    <el-select v-model="homeData.language" placeholder="请选择">
                        <el-option
                            v-for="item in languageList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.label"
                        ></el-option>
                    </el-select>
                </el-col>
                <el-col :span="2">
                    <label>主页模版</label>
                </el-col>
                <el-col :span="10">
                    <el-select v-model="homeData.theme" placeholder="请选择">
                        <el-option
                            v-for="item in themeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="2">
                    <label>客户邮箱</label>
                </el-col>
                <el-col :span="22">
                    <el-input placeholder="客户邮箱" v-model="homeData.email"></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="2">
                    <label>网站LOGO</label>
                </el-col>
                <el-col :span="22">
                    (建议尺寸：164*48)
                    <el-upload
                        class="avatar-uploader"
                        :headers="myHeaders"
                        action="/api/Home/imgUpload"
                        :on-remove="handleRemove"
                        :show-file-list="false"
                        :on-success="handleSuccess"
                    >
                        <img v-if="homeData.logo" :src="homeData.logo" class="avatar" />
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="2">
                    <label>Google Analytics</label>
                </el-col>
                <el-col :span="22">
                    <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="Google Analytics"
                        v-model="homeData.google_anal"
                    ></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="2">
                    <label>附加代码</label>
                </el-col>
                <el-col :span="22">
                    <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="填写主页统计代码、客服代码或第三方CLOAK等"
                        v-model="homeData.third_code"
                    ></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="2">
                    <label>底部版权</label>
                </el-col>
                <el-col :span="22">
                    <el-input type="textarea" :rows="4" placeholder v-model="homeData.copyright"></el-input>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import areaData from "../../assets/data/area.json";
import { $local } from "../../assets/utils/utils";
import Service from "../../services/main";
export default {
    name: "Edit",
    data() {
        return {
            myHeaders: {
                cstoken: $local("userInfo").token
            },
            homeData: {
                language: "1",
                theme: "1",
                home_page: ""
            },
            languageList: areaData.languageArr,
            themeList: [
                {
                    value: "1",
                    label: "默认模板"
                }
            ]
        };
    },
    created() {
        this.homeData.domain = this.$route.params.site;
        this.getHomeData();
    },
    methods: {
        //   获取数据
        getHomeData() {
            Service.getHomeList(this, { domain: this.homeData.domain }).then(
                res => {
                    if (res.result.list.length !== 0) {
                        this.homeData = res.result.list[0];
                    }
                }
            );
        },

        // 返回上一页
        btnClick() {
            this.$router.go(-1);
        },

        // 轮播图缩略图上传
        handleRemove(file) {
            Service.imgProDel(this, { img_url_path: file.url }).then(() => {
                this.homeData.logo = "";
            });
        },

        // 图片上传成功回调
        handleSuccess(res) {
            if (res.errorMsg === "success") {
                this.homeData.logo = res.result.path;
            }
        },

        // 保存主页设置
        saveFn() {
            if ("id" in this.homeData) {
                Service.editHomeList(this, this.homeData).then(res => {
                    if (res.errorMsg === "success") {
                        this.$message({ message: "编辑成功", type: "success" });
                        this.$router.go(-1);
                    }
                });
            } else {
                Service.addHomeList(this, this.homeData).then(res => {
                    if (res.errorMsg === "success") {
                        this.$message({ message: "添加成功", type: "success" });
                        this.$router.go(-1);
                    }
                });
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.articleList {
    margin: 20px 0;
}
.editList {
    max-width: 1366px;
    margin: 0 auto;
}
.el-row {
    margin-top: 20px;
}

.el-col-2 {
    font-size: 16px;
    line-height: 40px;
    text-align: center;
}

.el-select {
    width: 100%;
}
.disabled .el-upload--picture-card {
    display: none;
}
</style>